<template>
	<view class="container">
		<view class="a">
			<u-navbar  :is-back="false" back-icon-color="#000000"  :border-bottom="false"  :background="background" title-color="#000000" :title-bold="true">
				<view  class="nav" >
					
					<u-loading :show="isMsgloading" mode="flower"></u-loading>
					<text style="font-weight: bold;font-size: 16px;color: rgb(0,0,0);">消息</text>
					
				</view>
			</u-navbar>
		</view>
		<view class="main">
				<u-search height="70" :show-action="false" :disabled="true" />
				<view class="empty" v-show="msgItemList.length==0">
					<u-empty text="消息列表为空" mode="message"></u-empty>
				</view>
				<view class="list" v-for="(item,index) in msgItemList":key="item._id">
					<view class="list-item"  @click="chatDetail(item._id,item.nickname,index)">
						<view class="avatar">
							<image :src="item.avatar_url" class="image">
							<u-badge type="error" :count="item.UnreadMsg" :offset="[-10, -10]" />
						</view>
						<view class="wrap">
							<view class="content">
								<view class="name">{{item.nickname}}</view>
								<view class="message">{{item.lastMsgText.length>25?item.lastMsgText.substr(0,25)+'...':item.lastMsgText}}</view>
							</view>
							<view class="time">{{item.lastTime}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isMsgloading:false,
				background: {
					backgroundColor: '#ffffff',

					// 导航栏背景图
					// background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
					// 还可以设置背景图size属性
					// backgroundSize: 'cover',

					// 渐变色
					// backgroundImage: 'linear-gradient(45deg, rgb(85, 170, 255), rgb(0, 170, 255))'
				},
				navbar:'消息',
				msgItemList:[]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	// @import '@/./helper/styles/color.scss'; 
	.line-1 {
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		display: -webkit-box;
		overflow: hidden;
		white-space: normal;
		text-overflow: ellipsis;
	}
	.container {
		
		.nav {
			// padding: 60rpx;
			width: 100%;
			// height: 44px;
			display: flex;
			flex-direction: row;
			// /* // align-items: center; */
			justify-content: center;
		}

		.main {
			padding: 30rpx;

			.empty {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.list {
				margin-top: 10rpx;

				.list-item {
					display: flex;
					align-items: center;

					.avatar {
						position: relative;
						width: 84rpx;
						height: 84rpx;
						margin-right: 24rpx;

						.image {
							width: 100%;
							height: 100%;
							border-radius: 20%;
						}
					}

					.wrap {
						flex: 1;
						display: flex;
						align-items: center;
						padding: 20rpx 0;

						.content {
							flex: 1;

							.name {
								font-size: 32rpx;
								color: #333;
							}

							.message {
								@extend .line-1;
								font-size: 26rpx;
								color: #999;
							}
						}

						.time {
							color: #999;
							margin-left: 26rpx;
						}
					}
				}

				.list-item +.list-item {
					.wrap {
						border-top: 1rpx solid #fafafa;
					}
				}
			}
		}
	}
</style>
